<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		
		<style>
		body {
		  margin: 0;
		  overflow: hidden;
		  /* 隐藏body窗口区域滚动条 */
		}
		</style>
	</head>
	<body>
		
	</body>
	<!--引入three.js三维引擎-->
	<script src="https://www.unpkg.com/three@0.134.0/build/three.js"></script>
	<script>
		/**
		 * 创建场景对象Scene
		 */
		let scene = new THREE.Scene();
		/**
		 * 创建网格模型
		 */
		
		// let geometry = new THREE.BoxGeometry(100, 100, 100); //长方体 参数：长，宽，高
		// let geometry = new THREE.SphereGeometry(60, 40, 40); // 球体 参数：半径60  经纬度细分数40,40
		// let geometry = new THREE.CylinderGeometry( 50, 50, 100, 25 ); // 圆柱  参数：圆柱面顶部、底部直径50,50   高度100  圆周分段数
		// let geometry = new THREE.OctahedronGeometry(50); // 正八面体
		// let geometry = new THREE.DodecahedronGeometry(50); // 正十二面体
		let geometry = new THREE.IcosahedronGeometry(50); // 正二十面体
		// let geometry = new THREE.BoxGeometry(100, 100, 100); //创建一个立方体几何对象Geometry
		let material = new THREE.MeshLambertMaterial({
		  color: 0x0000ff
		}); //材质对象Material
		let mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
		scene.add(mesh); //网格模型添加到场景中
		/**
		 * 光源设置
		 */
		//点光源
		let point = new THREE.PointLight(0xffffff);
		point.position.set(400, 200, 300); //点光源位置
		scene.add(point); //点光源添加到场景中
		//环境光
		let ambient = new THREE.AmbientLight(0x444444);
		scene.add(ambient);
		// console.log(scene)
		// console.log(scene.children)
		/**
		 * 相机设置
		 */
		let width = window.innerWidth; //窗口宽度
		let height = window.innerHeight; //窗口高度
		let k = width / height; //窗口宽高比
		let s = 200; //三维场景显示范围控制系数，系数越大，显示的范围越大
		//创建相机对象
		let camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
		camera.position.set(200, 300, 200); //设置相机位置
		camera.lookAt(scene.position); //设置相机方向(指向的场景对象)
		/**
		 * 创建渲染器对象
		 */
		let renderer = new THREE.WebGLRenderer();
		renderer.setSize(width, height);//设置渲染区域尺寸
		renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色
		document.body.appendChild(renderer.domElement); //body元素中插入canvas对象
		
		//执行渲染操作   指定场景、相机作为参数
		//renderer.render(scene, camera);
		
		//周期性渲染
		// // 渲染函数 setInterval
		// function render() {
		//     renderer.render(scene,camera);//执行渲染操作
		//     mesh.rotateY(0.01);//每次绕y轴旋转0.01弧度
		// }
		// //间隔20ms周期性调用函数fun,20ms也就是刷新频率是50FPS(1s/20ms)，每秒渲染50次
		// setInterval("render()",20);
		
		// //渲染频率 requestAnimationFrame
		// function render() {
		// 	renderer.render(scene,camera);//执行渲染操作
		// 	mesh.rotateY(0.01);//每次绕y轴旋转0.01弧度
		// 	requestAnimationFrame(render);//请求再次执行渲染函数render
		// }
		// render();
		
		//均匀旋转
		let T0 = new Date();//上次时间
		function render() {
			let T1 = new Date();//本次时间
			let t = T1-T0;//时间差
			T0 = T1;//把本次时间赋值给上次时间
			requestAnimationFrame(render);
			renderer.render(scene,camera);//执行渲染操作
			mesh.rotateY(0.001*t);//旋转角速度0.001弧度每毫秒
		}
		render();
		
		// function render() {
		//   renderer.render(scene,camera);//执行渲染操作
		// }
		// render();
		// var controls = new THREE.OrbitControls(camera,renderer.domElement);//创建控件对象
		// controls.addEventListener('change', render);//监听鼠标、键盘事件
		
	</script>
	
</html>
